<script setup>
import { ref } from "vue";
import Ellipsis from "./Ellipsis.vue";
import Icon from "./Icon.vue";
import { useRouter } from "vue-router";
import { useStore } from "../store";
import { Modal, Notification } from "@arco-design/web-vue";

const props = defineProps(["band"]);
const store = useStore();

//是否显示省略符的ref
const isEllipsisShow = ref(false);
isEllipsisShow.value = props.band.icons.length > 11;

//跳转至band页面
const router = useRouter();
const iconGroupDetailHandle = () => {
  router.push({
    path: `/band`, query: {
      name: props.band.name
    }
  });
};
const iconGroupDeleteHandle = () => {
  Modal.open({
    title: "删除IconGroup",
    content: "IconGroup将从云端删除，此行为不可撤销，确认吗？",
    onOk() {
      store.deleteBand(props.band.name).then(
        () => {
          Notification.success("删除IconGroup成功！");
        },
        () => {
          Notification.error("删除IconGroup失败！");
        }
      );
    },
  });
};
</script>

<template>
  <div class="iconGroupContainer" @click.stop="iconGroupDetailHandle">
    <!-- Group的header部分，包括GroupName和删除Group按钮 -->
    <div class="iconGroupHeader">
      <h1 class="iconGroupTitle">{{ props.band.name }}</h1>
      <div class="iconGroupDeleteBtn" @click.stop="iconGroupDeleteHandle">
        <icon-delete />删除
      </div>
    </div>
    <!-- Group的内容部分，遍历本Group的所有Icon并显示，总数量大于11时只显示11个，第十二个位置显示省略符 -->
    <div class="iconsContainer">
      <Icon v-for="icon in band.icons.splice(0, 11)" :icon="icon" />
      <Ellipsis v-if="isEllipsisShow" />
    </div>
  </div>
</template>

<style scoped>
.iconGroupContainer {
  width: 400px;
  height: 400px;
  background-color: black;
  border: 6px solid orange;
  border-radius: 10px;
}

.iconGroupContainer:hover {
  cursor: pointer;
  transform: scale(1.01);
  transition: transform 0.1s linear;
}

.iconGroupHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: orange;
}

.iconGroupTitle {
  margin: 0;
  padding: 5px;
  height: 50px;
}

.iconGroupDeleteBtn {
  color: #000;
  margin-right: 10px;
}

.iconGroupDeleteBtn:hover {
  color: #eee;
}

.iconsContainer {
  padding: 15px 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  row-gap: 30px;
  column-gap: 14px;
  justify-content: space-between;
  align-content: space-between;
}
</style>
